<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0"
			backgroundColor="#ffffff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<u-icon name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
			</view>
		</tui-navigation-bar>
		<view class="header">
			<view class="tips">
				帮组介绍
				<tui-icon name="about" color="#7D7D7D" size="36rpx"></tui-icon>
			</view>
			<view class="list">
				<view class="list-content">
					<view class="label">
						设置为帮组活动
					</view>
					<view class="tips">
						开启后可设置帮组活动的佣金比例
					</view>
				</view>
				<view class="list-right">
					<u-switch :value="value" size="50" @change="switchChange" activeColor="#7C7C7C"
						inactiveColor="#63D1D6"></u-switch>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="group">
				<view class="title">分组1</view>
				<view class="group-content">
					<tui-list-view>
						<tui-list-cell padding="22rpx 0" :arrow="true">
							<view class="list">
								<view class="label">请选择性别</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue1" inputAlign="right"
											placeholder="请选择性别"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
						<tui-list-cell padding="22rpx 0" :arrow="false">
							<view class="list">
								<view class="label">
									填写帮组佣金
								</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue2" inputAlign="right"
											placeholder="请填写帮组佣金"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
					</tui-list-view>
				</view>
			</view>
			
			<view class="group" v-show="isAddGroup">
				<view class="title">分组2</view>
				<view class="group-content">
					<tui-list-view>
						<tui-list-cell padding="22rpx 0" :arrow="true">
							<view class="list">
								<view class="label">请选择性别</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue3" inputAlign="right"
											placeholder="请选择性别"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
						<tui-list-cell padding="22rpx 0" :arrow="false">
							<view class="list">
								<view class="label">
									填写帮组佣金
								</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue4" inputAlign="right"
											placeholder="请填写帮组佣金"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
					</tui-list-view>
				</view>
			</view>
			<view class="group-btn">
				<button @click="addGroup">
					<u-icon name="plus" style="margin-right: 10rpx;"></u-icon>新增分组
				</button>
			</view>
		</view>
		<view class="content" style="margin-top: 200rpx;">
			<view class="group">
				<view class="group-content">
					<tui-list-view>
						<tui-list-cell padding="22rpx 0" :arrow="false">
							<view class="list">
								<view class="label">
									填写帮组佣金
								</view>
								<view class="input">
									<view class="">
										<u-input border="none" v-model="groupValue5" inputAlign="right" placeholder="请填写帮组佣金"></u-input>
									</view>
								</view>
							</view>
						</tui-list-cell>
					</tui-list-view>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button shape="circle" color="#63D1D6" @click="confirm">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: true,
				groupValue1: '',
				groupValue2: '',
				groupValue3: '',
				groupValue4: '',
				groupValue5: '',
				headerHeight: 64,
				isAddGroup: false,
				num: 1,
			}
		},
		onLoad(params) {
			this.params = params;
			let system = getSystemInfo();
			if (system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack()
			},
			switchChange(e) {
				console.log("++++++++", e)
				this.value = e
			},
			addGroup() {
				this.isAddGroup = true
				this.num++
			},
			confirm() {
				
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;

		.header {
			position: relative;
			padding: 200rpx 22rpx 20rpx;
			background: #FFFFFF;

			// margin-top: 170rpx;
			.tips {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #464646;
				font-size: 26rpx;
			}

			.list {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 52rpx;

				.list-content {
					flex: 1;

					.label {
						color: #000000;
						font-size: 30rpx;
					}

					.tips {
						color: #D4D4D4;
						font-size: 24rpx;
					}
				}

				.list-right {
					position: relative;
				}
			}
		}

		.content {
			position: relative;

			.group {
				position: relative;

				.title {
					position: relative;
					padding: 24rpx 22rpx;
					color: #000000;
					font-size: 30rpx;
				}

				.group-content {
					position: relative;
					background: #FFFFFF;
					padding: 0 24rpx;

					.list {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-right: 70rpx;

						.label {
							position: relative;
							color: #000000;
							font-size: 30rpx;
							margin-bottom: 6rpx;
						}

						.input {
							flex: 1;
							text-align: right;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
			}

			.group-btn {
				position: relative;
				padding: 28rpx 20rpx;
				color: #565656;
				font-size: 30rpx;
				height: 100rpx;

				button {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0;
					border: none;
					cursor: pointer;
					border-radius: 28rpx;
					height: 100rpx;
					background-color: #fff;
				}

				.btn {
					position: relative;

				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 12rpx 30rpx 76rpx 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 2rpx solid #EBEAEC;
		}
	}
</style>